<template>
  <div class='container'>
   <el-card>
    <!-- form表单 -->
     <el-form :inline="true" label-width="80px" class="right" >
        <el-form-item label="关键字">
            <el-input v-model="formData.keyword" placeholder="请输入搜索内容" @keyup.enter.native="searchBtn"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="cleanBtn">清除</el-button>
            <el-button size="small" type="primary" @click="searchBtn" >搜索</el-button>
        </el-form-item>
     </el-form>
     <!-- 数据条数 -->
    <el-row class="midle">
        <el-col>
            <i class="el-icon-info"></i>
            <span>数据一共{{this.count}}条</span>
        </el-col>
    </el-row>

    <!-- table表格 -->
   <el-table :data="list">
          <el-table-column  label="编号" prop="id"></el-table-column>
          <el-table-column label="题型" prop="questionType" :formatter="aa" > </el-table-column>
          <el-table-column label="题目编号" prop="questionIDs">
            <template v-slot={row}>
                <a
                v-for="(item,index) in row.questionIDs" :key="index"
                style="color:blue"
                @click="detail(item)"
                >
                    {{item.number}}
                </a>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addTime"></el-table-column>
          <el-table-column label="答题时间(s)" prop="totalSeconds"> </el-table-column>
          <el-table-column label="正确率(%)" prop="accuracyRate"> </el-table-column>
          <el-table-column label="录入人" prop="userName"> </el-table-column>
          <el-table-column label="操作" >
            <template v-slot="{row}">
                 <el-button type="danger" plain icon="el-icon-delete" circle @click="removeRandoms(row)"></el-button>
            </template>
          </el-table-column>
   </el-table>
   <!-- 分页 -->
        <el-row type="flex" justify="end">
            <el-pagination
                background
                layout="total, prev, pager, next, sizes, jumper"
                :total="count"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                >
             </el-pagination>
        </el-row>
   </el-card>
   <randomsdialog :showDialog.sync="showDialog" :detailList.sync="detailList" ></randomsdialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
import randomsdialog from '../components/random-dialog.vue'
import baseApi from '../../api/base/baseApi'
export default {
  components: {
    randomsdialog
  },
  data () {
    return {
      formData: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      list: [],
      count: 0,
      showDialog: false,
      detailList: {}
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    handleSizeChange (val) {
    //   console.log(`每页 ${val} 条`)
      this.formData.pagesize = val
      this.randoms()
    },
    handleCurrentChange (val) {
    //   console.log(`当前页: ${val}`)
      this.formData.page = val
      this.randoms()
    },
    // 获取列表数据
    async randoms () {
      const { data } = await randoms(this.formData)
      console.log(data)
      this.list = data.items
      this.count = data.counts
    },
    // 删除
    async removeRandoms (data) {
      try {
        await this.$confirm('确定删除嘛')
        await removeRandoms(data)
        this.randoms()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 清除输入框
    cleanBtn () {
      this.formData.keyword = ''
      this.randoms()
    },
    // 搜索
    async searchBtn () {
      this.formData.page = 1
      this.formData.pagesize = 10
      //   输入框上双向绑定了
      await this.randoms()
    },
    // 题库详情
    async detail (da) {
      const { data } = await detail(da)
      this.showDialog = true
      console.log(data)
      this.detailList = data
    },
    // 枚举，cellValue为当前格里的数值
    aa (row, column, cellValue, index) {
      // find找到和cellValue格子里相同的值
      const obj = baseApi.hireType.find(item => item.id === cellValue)
      return obj ? obj.value : '未知'
    }
  }
}
</script>

<style scoped>
.right {
    display: flex;
    justify-content: space-between;
}
.top {
    margin-bottom: 15px;
}
.midle{
    background: #f0eaea;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>
